<template>
    <div>
        <!-- banner图 -->
        <div class="banner">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img src="../../assets/img/bg1.png" />
                    </div>
                    <div class="swiper-slide">
                        <img src="../../assets/img/bg1.png" />
                    </div>
                    <div class="swiper-slide">
                        <img src="../../assets/img/bg1.png" />
                    </div>
                </div>
                <div class="swiper-pagination"></div>
            </div>
            <div class="banner-top">
                <img @click="$router.go(-1)" src="../../assets/img/fanhui.png" alt />
                <div>
                    <img @click="stars" v-if="star" src="../../assets/img/shoucang.png" alt />
                    <img @click="stars" v-else src="../../assets/img/yishoucang.png" alt />
                    <img id="share" src="../../assets/img/fenxiang.png" alt />
                </div>
            </div>
        </div>
        <!-- 进度说明 -->
        <div class="progress">
            <p>HPH—海南地产</p>
            <div>
                <span>当前进度：36%</span>
                <span>
                    已交易：
                    <strong>123656</strong>USDT
                </span>
            </div>
            <div class="mt-progress list-line">
                <div class="mt-progress-content">
                    <div class="mt-progress-runway"></div>
                    <div class="mt-progress-progress"></div>
                </div>
            </div>
            <div>
                <div>
                    <span>
                        总额：
                        <strong>666666666</strong>USDT
                    </span>
                </div>
                <div>
                    <img @click="stars" v-if="star" src="../../assets/img/shoucang.png" alt />
                    <img @click="stars" v-else src="../../assets/img/yishoucang.png" alt />
                    <span>收藏</span>
                </div>
            </div>
            <p>
                开始认购时间：
                <span>2019-06-18 12:00:00</span>
            </p>
            <p>
                结束认购时间：
                <span>2019-06-18 12:00:00</span>
            </p>
        </div>
        <!-- 产品说明 -->
        <div class="product">
            <div>
                <strong>产品说明</strong>
                <span>白皮书</span>
            </div>
            <p>产品：平台流通货币</p>
            <p>购买：可以用BTC,ETH等主流数字货币及法币购买兑换</p>
            <p>权益：购买项目份额，享受项目盈利与利益分红</p>
        </div>
        <!-- 介绍 -->
        <div class="introduce">
            <div>
                <span>
                    <img src="../../assets/img/bg1.png" alt />
                </span>
                <span>HPH-海南地产</span>
            </div>
            <p>产品简介</p>
            <div>
                HPH海南地产项目-“鹏晖新天地“是集大型购物商场（鹏晖商业广场）、甲级写字楼
                （鹏晖国际大厦）和花园式住宅等设施于一体的多功能城市综合体。用户使用即刻网SPO
                （主流数字货币皆可兑换）购买该项目token，就相当于持有相关房产份额，持有一个月
                后即可享受房产+租金+分红收益。HPH is a Hainan real estate project - "Penghui
                New Plaza" is a multi-functional area containing large shopping malls,
                high-end office buildings and residential buildings.
            </div>
        </div>
        <!-- 项目概况 -->
        <div class="situation">
            <p class="situation-title">项目概况</p>
            <div class="situation-small-title">
                <span>【项目地点】</span>
                <span>创币网</span>
            </div>
            <div class="situation-small-title">
                <span>【项目估值】</span>
                <span>2000万</span>
            </div>
            <div class="situation-small-title">
                <span>【项目发行】</span>
                <!-- <span>2000万</span> -->
            </div>
            <p>
                HPH海南地产项目
                市值29亿元（均价17000元/㎡，共17.13万平方米）
                共发行10亿枚
                项目初始发行价为：1HPH=1SPO=1元
                项目初始发行值：10亿SPO（即10亿元），约为市场估值的1/3
                上线首发让利价为：1HPH=0.1SPO=0.1元
                项目首发值：1亿SPO（0.1元*10亿枚=1亿元），约为市场估值的1/29
            </p>
            <div class="situation-small-title">
                <span>【投资预估】</span>
                <!-- <span>2000万</span> -->
            </div>
            <p>
                HPH海南地产项目
                市值29亿元（均价17000元/㎡，共17.13万平方米）
                共发行10亿枚
                项目初始发行价为：1HPH=1SPO=1元
                项目初始发行值：10亿SPO（即10亿元），约为市场估值的1/3
                上线首发让利价为：1HPH=0.1SPO=0.1元
                项目首发值：1亿SPO（0.1元*10亿枚=1亿元），约为市场估值的1/29
            </p>
            <div class="situation-small-title">
                <span>【项目详情】</span>
                <!-- <span>2000万</span> -->
            </div>
            <p>
                HPH海南地产项目
                市值29亿元（均价17000元/㎡，共17.13万平方米）
                共发行10亿枚
                项目初始发行价为：1HPH=1SPO=1元
                项目初始发行值：10亿SPO（即10亿元），约为市场估值的1/3
                上线首发让利价为：1HPH=0.1SPO=0.1元
                项目首发值：1亿SPO（0.1元*10亿枚=1亿元），约为市场估值的1/29
            </p>
            <div class="situation-small-title">
                <span>【项目图集】</span>
                <!-- <span>2000万</span> -->
            </div>
            <div class="situation-pic">
                <img src="../../assets/img/bg2.png" alt="">
            </div>
            <div class="situation-pic">
                <img src="../../assets/img/bg2.png" alt="">
            </div>
             <p class="situation-title">第三方认证</p>
             <div class="situation-small-title">
                <span>【权益证明】</span>
                <span>独立房产证</span>
            </div>
            <div class="situation-small-title">
                <span>【官网查询】</span>
                <span style="color:#55A9E2">http://hkrealestate.haikou.gov.cn/</span>
            </div>
            <div class="situation-small-title">
                <span>【权益证明】</span>
                <!-- <span>独立房产证</span> -->
            </div>
            <div class="situation-pic">
                <img src="../../assets/img/bg2.png" alt="">
            </div>
            <div class="situation-pic">
                <img src="../../assets/img/bg2.png" alt="">
            </div>
        </div>
        <!-- 提交按钮 -->
        <div class="situation-btn" @click="$router.push({name:'stoBuy'})">购买</div>
    </div>
</template>
<script>
import Swiper from "swiper";
import baseJs from "../../assets/js/base";
export default {
    data() {
        return {
            star: false
        };
    },
    mounted() {
        //banner初始化
        baseJs.soureDetail();
    },
    methods: {
        //收藏
        stars() {
            this.star = !this.star;
        }
    }
};
</script>
<style lang="less" scoped>
//banner图
.banner {
    width: 100%;
    height: 260px;
    position: relative;
    .swiper-container {
        width: 100%;
        height: 260px;
        z-index: 1;
        .swiper-slide {
            width: 100%;
            height: 260px;
            img {
                width: 100%;
                height: 100% !important;
            }
        }
    }
    .banner-top {
        width: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 2;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 15px;
        box-sizing: border-box;
        > img:first-child {
            width: 10px;
        }
        div {
            img:first-child {
                margin-right: 10px;
            }
            img {
                width: 16px;
            }
        }
    }
}
//进度说明
.progress {
    padding: 15px;
    font-size: 12px;
    color: @blackColor5;
    border-bottom: 10px solid @blackColor1;
    p:nth-child(1) {
        color: @blackColor8;
        font-size: 14px;
        font-weight: bolder;
    }
    > div:nth-child(2) {
        margin: 4px 0 2px;
        .flexBetweenCenter();
        strong {
            color: @blueColor5;
            font-size: 16px;
        }
    }
    .list-line {
        height: 7px;
        .mt-progress-content {
            height: 7px;
            .mt-progress-runway {
                border-radius: 10px;
                overflow: hidden;
                background-color: @white;
                border: 1px solid @blackColor3;
                height: 7px;
            }
            .mt-progress-progress {
                border-radius: 10px;
                overflow: hidden;
                width: 20%;
                height: 7px;
            }
        }
    }
    > div:nth-child(4) {
        .flexBetweenCenter();
        margin: 8px 0 6px;
        > div:nth-child(1) {
            strong {
                font-size: 16px;
                color: @blueColor10;
            }
        }
        > div:nth-child(2) {
           .flexStartCenter();
            img {
                width: 19px;
                margin-right: 6px;
            }
        }
    }
    > p:nth-child(5),
    > p:nth-child(6) {
        margin-bottom: 6px;
        span {
            color: @blackColor8;
            font-weight: 400;
        }
    }
}
// 产品说明
.product {
    padding: 15px;
    border-bottom: 10px solid @blackColor1;
    > div:nth-child(1) {
        .flexBetweenCenter();
        margin-bottom: 10px;
        strong {
            font-size: 15px;
            color: @blackColor8;
        }
        span {
            color: @blueColor5;
            font-size: 14px;
        }
    }
    > p {
        font-size: 13px;
        color: @blackColor5;
        font-weight: bold;
        margin-bottom: 10px;
    }
}
// 介绍
.introduce {
    padding: 15px;
    border-bottom: 10px solid @blackColor1;
    div:nth-child(1) {
        .flexStartCenter();
        font-size: 14px;
        color: @blackColor8;
        font-weight: bold;
        span:nth-child(1) {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            overflow: hidden;
            .flexCenterContent();
            margin-right: 8px;
        }
    }
    p:nth-child(2) {
        font-size: 15px;
        color: @blackColor8;
        font-weight: bold;
        margin: 10px 0 6px;
    }
    div:nth-child(3) {
        font-size: 12px;
        color: @blackColor7;
        font-weight: bold;
        line-height: 24px;
    }
}
// 项目概况
.situation {
    padding: 15px;
    > p {
        font-size: 12px;
        color: @blackColor5;
        font-weight: 400;
        margin-bottom: 8px;
    }
    .situation-title {
        color: @blackColor8;
        font-size: 15px;
        font-weight: bold;
        margin-bottom: 8px;
    }
    .situation-small-title {
        .flexBetweenCenter();
        font-size: 12px;
        margin-bottom: 8px;
        span:nth-child(1) {
            color: @blackColor8;
            font-weight: bold;
        }
    }
    .situation-pic{
        margin-bottom: 10px;
    }
}
//按钮
.situation-btn{
    width: 90%;
    margin: 0 auto 30px;
    height: 45px;
    line-height: 45px;
    text-align: center;
    color: @white;
    font-size: 16px;
    background-color: @blueColor10;
    border-radius: 4px;
}
</style>
